<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="day"></div>
		<br />
		<div id="news"></div>
		<br />
		<div>【历史上的今天】</div>
		<div id="history"></div>
		<br />
		<div>【每日寄语】</div>
		<div id="sentence"></div>
		<br />
		<div>【进度条】</div>
		<div id="jinduImg"></div>
		<div id="jindu"></div>

		<!-- ajax -->
		<script>
			function getAjax(httpUrl, callbackFn) {
				var xhr = new XMLHttpRequest();
				xhr.open("GET", httpUrl, true);
				xhr.send();
				xhr.onreadystatechange = function () {
					if (xhr.status == 200 && xhr.readyState == 4) {
						callbackFn(xhr);
					}
				};
			}
		</script>

		<!-- 年月日 -->
		<script>
			var dayNum = (year, month, day) => {
				var count = 0;
				var Feb = 0;
				switch (month) {
					case 1:
						count = day;
						break;
					case 2:
						count = 31 + day;
						break;
					case 3:
						count = 59 + day;
						break;
					case 4:
						count = 90 + day;
						break;
					case 5:
						count = 120 + day;
						break;
					case 6:
						count = 151 + day;
						break;
					case 7:
						count = 181 + day;
						break;
					case 8:
						count = 212 + day;
						break;
					case 9:
						count = 243 + day;
						break;
					case 10:
						count = 273 + day;
						break;
					case 11:
						count = 304 + day;
						break;
					case 12:
						count = 334 + day;
						break;
					default:
						break;
				}
				if (year % 4 == 0 && month > 2) {
					//闰年
					count++;
				}
				return count;
			};

			var jindu = (num) => {
				var Img = ``;
				switch (num) {
                    case 0:
						Img = `▓░░░░░░░░░░`;
						break;
					case 1:
						Img = `▓▓░░░░░░░░░`;
						break;
					case 2:
						Img = `▓▓▓░░░░░░░░`;
						break;
					case 3:
						Img = `▓▓▓▓░░░░░░░`;
						break;
					case 4:
						Img = `▓▓▓▓▓░░░░░░`;
						break;
					case 5:
						Img = `▓▓▓▓▓▓░░░░░`;
						break;
					case 6:
						Img = `▓▓▓▓▓▓▓░░░░`;
						break;
					case 7:
						Img = `▓▓▓▓▓▓▓▓░░░`;
						break;
					case 8:
						Img = `▓▓▓▓▓▓▓▓▓░░`;
						break;
					case 9:
						Img = `▓▓▓▓▓▓▓▓▓▓░`;
                        break;

					default:
						break;
                }
                return Img;
			};
		</script>

		<!-- 渲染 -->
		<script>
			var url = "https://news.topurl.cn/api";
			getAjax(url, function (res) {
				var result = JSON.parse(res.response);
				console.log(result);
				// 天气
				var d1 = document.querySelector("#day");
				d1.innerHTML =
					`今天是` +
					result.data.calendar.cYear +
					`年` +
					result.data.calendar.cMonth +
					`月` +
					result.data.calendar.cDay +
					`日。农历` +
					result.data.calendar.lMonth +
					`月` +
					result.data.calendar.lDay +
					`日<br><br>` +
					result.data.weather.city +
					`今日` +
					result.data.weather.detail.text_day +
					`，气温` +
					result.data.weather.detail.low +
					`~` +
					result.data.weather.detail.high +
					`℃`;

				// 新闻列表
				var newList = result.data.newsList;
				var d2 = document.querySelector("#news");
				newList.forEach(function (item, index) {
					var newItem = document.createElement("div");
					let num = index + 1;
					newItem.innerHTML = num + `. ` + item.title;
					d2.appendChild(newItem);
				});
				// 那年今日
				var historyList = result.data.historyList;
				var d3 = document.querySelector("#history");
				historyList.forEach(function (item, index) {
					var newItem = document.createElement("div");
					newItem.innerHTML = item.event;
					d3.appendChild(newItem);
				});
				// 寄语
				var sentence = document.querySelector("#sentence");
				sentence.innerHTML =
					result.data.sentence.sentence +
					`——&nbsp` +
					result.data.sentence.author;

				// 进度条
				var count = dayNum(
					result.data.calendar.cYear,
					result.data.calendar.cMonth,
					result.data.calendar.cDay
				);
				console.log(count);
				var countP = 0;
				if(result.data.calendar.cYear%4==0){
					countP = (count / 366) * 100;
				}else{
					countP = (count / 365) * 100;
				}


				
				console.log(parseInt(countP/10));
                var Img = jindu(parseInt(countP/10))

                var jinduImg = document.querySelector("#jinduImg");

                jinduImg.innerHTML = Img;

				var jinduTxt = document.querySelector("#jindu");
				jinduTxt.innerHTML =
                result.data.calendar.cYear + `年，` + `您已经使用了&nbsp` + countP.toFixed(2) + `&nbsp%`;
			});

			//本新闻模板为吞吞所写，感谢api作者
		</script>
	</body>
</html>
